<template>
  <div>
    <n-card class="user-content">
      <!-- 搜索部分 -->
      <n-grid x-gap="24">
        <n-gi span="6">
          <n-input-group>
            <n-input :style="{ width: '100%' }" placeholder="请输入资产名/ip" />
            <n-button type="primary" @click="searchDev">搜索</n-button>
          </n-input-group>
        </n-gi>
      </n-grid>

      <!-- 资产列表 -->
      <div style="margin-top: 30px">
        <n-data-table
          ref="table"
          :columns="columns"
          :data="data"
          :row-key="(row) => row.id"
          @update:checked-row-keys="handleCheck"
        />
      </div>

      <!-- 底部分页全选 -->
      <n-grid x-gap="24" style="margin-top: 15px; margin-bottom: 15px">
        <!-- 全选按钮 -->
        <n-gi span="4">
          <span>已选 {{ checkedRowKeys.length }} 行</span>
        </n-gi>

        <!-- 分页部分 -->
        <n-gi span="20">
          <n-space justify="end">
            <n-pagination
              v-model:page="page"
              v-model:page-size="pageSize"
              :page-count="pageCount"
              show-size-picker
              :page-sizes="pageGroup"
              show-quick-jumper
              @update:page="PageChange"
              @update:page-size="pageSizeChange"
            />
          </n-space>
        </n-gi>
      </n-grid>
    </n-card>
  </div>
</template>

<script setup>
import { CloudUploadSharp } from "@vicons/ionicons5";
import { useMessage, NBadge, NButton, NSpace, NTag, useDialog, NDropdown } from "naive-ui";
import SvgIcon from '../../components/SvgIcon.vue'
import {
  computed,
  getCurrentInstance,
  onBeforeMount,
  ref,
  h,
} from "vue";
const { proxy } = getCurrentInstance();

const message = useMessage();
const dialog = useDialog()

// 弹出对话框
const showModal = ref(false)

const modalTitle = ref(null)
const formRef = ref(null)


//操作列按钮
const accountSelectList = [
  {
    label: 'root',
    key: 'root'
  },
  {
    label: 'test',
    key: 'test'
  }
]
// 协议
const services = ref([
  {
    label: "ssh",
    value: "ssh",
    type: 'info'
  },
  {
    label: "rdp",
    value: "rdp",
    type: 'success',
    disabled: true
  },
  {
    label: "vnc",
    value: "vnc",
    type: 'success',
    disabled: true
  }
])

const types = ref([
  {
    label: "Linux",
    value: 1,
  },
  {
    label: "Windows",
    value: 2,
    disabled: true
  },
  {
    label: "Network",
    value: 3,
    disabled: true
  },
])

//定义表格列
const columns = [
  {
    type: "selection",
  },
  {
    title: "资产名",
    key: "name",
    align: "center"
  },
  {
    title: "IP",
    key: "ip",
    align: "center",
  },
  {
    title: "协议",
    key: "service",
    align: "center",
    render(row) {
      let roleName = ''
      let type = ''
      services.value.map((roleItem) => {
        if (roleItem.value == row.service) {
          roleName = roleItem.label
          type = roleItem.type
        }
      })
      return h("div", null, [
        h(
          NTag,
          {
            type: type,
          },
          { default: () => roleName }
        )
      ]);
    }
  },
  {
    title: "资产类型",
    key: "type",
    align: "center",
    render(row) {
      return h(
        "div",
        {
          justify: "center",
        },
        [
          h(
            SvgIcon,
            {
              style: 'font-size:1.2rem',
              name: 'linux'
            },
            { default: () => roleName }
          ),
          h(
            'span',
            {
              style: 'margin-left:6px'
            },
            { default: () => 'Liunx' }
          )
        ]);
    }
  },

  {
    title: "状态",
    key: "state",
    align: "center",
    render(row) {
      if (row.status == 1) {
        return h("div", null, [
          h(
            NBadge,
            {
              dot: true,
              processing: true,
              type: "success",
              style: "margin-right:5px",
            },
            null
          ),
          "正常",
        ]);
      } else {
        return h("div", null, [
          h(
            NBadge,
            {
              dot: true,
              type: "error",
              style: "margin-right:5px",
            },
            null
          ),
          "禁用",
        ]);
      }
    },
  },
  {
    title: "简要说明",
    key: "description",
    align: "center",
    width: 200,
    ellipsis: {
      tooltip: true
    }
  },
  // {
  //   title: "快捷访问",
  //   align: "center",
  //     render(row) {
  //       return h(
  //         'span',null,'admin'
  //       )
  //     }
  // },

  {
    title: "登录",
    align: "center",
    render(row) {
       console.log(row.accounts)
       let itemOptions =[] 
       for (let index = 0; index < row.accounts.length; index++) {
         itemOptions.push(
           {
             label:row.accounts[index].account,
            key:row.accounts[index].account 
           }
         )
         
       }

      return h(
        NDropdown ,
        {
          options:itemOptions,
          onSelect:function(key){
            // console.log(row)
            console.log(key)
            window.open('/webssh?id='+row.id+'&account='+key)
          }
       },
        {
          default: () => {
            return h(
              NButton,
              {
                text:true,
                color:'#4098fc'
              },
              {
                default: () => '账号'
              }
            )
          }
        }
      );
    },
  },
];

const data = ref([]);

const checkedRowKeys = ref([]);

// 获取分页用户信息的函数
function getDevInfo(pagenum, pagesize) {
  proxy.$http
    .get("/api/dev/list", {
      params: {
        page: pagenum - 1,
        pagesize: pagesize,
      },
    })
    .then(function (response) {
      console.log(response)
      if (response.status != 200) {
        message.error(response.data.msg);
        return;
      }

       if (response.data.hosts) {
        data.value = response.data.hosts;
      } else {
        data.value = []
      }
      
      total.value = response.data.total;

      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
}

function handleCheck(rowKeys) {
  checkedRowKeys.value = rowKeys;
}

//查询用户
function searchDev() {
  console.log("查询资产");
}

// 分页部分
const page = ref(1);
const pageSize = ref(10);
let total = ref(null);
const pageGroup = [10, 20, 30, 50, 100]

const pageCount = computed(() => {
  return Math.ceil(total.value / pageSize.value);
});

// 翻页回调
function PageChange(p) {
  page.value = p;
  // console.log(p);
  getDevInfo(p, pageSize.value);
}
// 设置吗每页显示数量回调
function pageSizeChange(psize) {
  pageSize.value = psize;
  page.value = 1
  getDevInfo(page.value, psize);
}

onBeforeMount(() => {
  getDevInfo(page.value, pageSize.value)
})
</script>
